<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--课程数据-->
      <el-col :span="24" :xs="24">
        <el-form :rules="queryForm" ref="queryForm" :model="queryForm" size="small" :inline="true" label-width="68px">
          <!--  -->
          <!-- <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="Listload">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
          </el-form-item> -->
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handelAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-table :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="时间安排" align="center" prop="arrangeTime" :show-overflow-tooltip="true" />
          <el-table-column label="课程状态" align="center" prop="status">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handelEdit(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryForm.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :limit.sync="queryForm.pageSize"
      @pagination="Listload"
    />
      </el-col>
    </el-row>

    <!-- 添加或修改课程配置对话框 -->
    <el-dialog :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="时间安排">
              <el-time-picker
                v-model="form.startTime"
                placeholder="开始时间"
                value-format="HH:00">
              </el-time-picker>
              <el-time-picker
                arrow-control
                v-model="form.endTime"
                placeholder="结束时间"
                value-format="HH:00">
              </el-time-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  -->
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveupdate">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { addTimePool,listTimepool,updateTimePool,delTimePool } from "@/api/trainingTime/index.js"; // 导入时间接口
import { list } from "@/api/monitor/logininfor";
import { param } from "@/utils";
import moment from 'moment';
import { formToJSON } from "axios";

export default {
  name: 'Course',
  data() {
    return {
      // 课程数据
      tableData: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        startTime: '',
        endTime:'',
      },
      // 课程查询条件
      queryForm: {
        pageNum: 1,
        pageSize: 5,
        venueUniqueIdentifier: window.sessionStorage.getItem('venueUniqueIdentifier'),
      },
      // 表单验证规则
      rules: {
        arrangeTime: [
          { required: true, message: "请输入时间", trigger: "blur" },
        ],
      },
      
    }
  },
  created() {
    this.Listload();
  },
  methods: {
    /** 查询课程列表 */
    Listload() {
      listTimepool(this.addDateRange(this.queryForm)).then(res => {
        this.tableData = res.data.content;
        this.total = res.data.totalSize;
      });
    },
    /** 提交按钮（新增修改） */
    saveupdate() {
        // debugger
        console.log(this.form);
      this.$refs["form"].validate(valid => {
        if (valid) {
          const formData = new FormData();
          formData.set("venueUniqueIdentifier", window.sessionStorage.getItem('venueUniqueIdentifier'))
          formData.set("startTime", this.form.startTime);
          formData.set("endTime", this.form.endTime);
          // 仅在修改时设置 id
          if (this.form.id !== undefined) {
            formData.set("id", this.form.id);
          }
          addTimePool(formData).then(res => {
            if (this.form.id != undefined) {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.Listload();
            } else {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.Listload();
            }
          });
        }
      });
    },
    /** 添加弹窗 */
    handelAdd() {
      this.form = {}
      this.open = true;
    },
    /** 修改弹窗 */
    handelEdit(row) {
      const [startTime, endTime] = row.arrangeTime.split('-');
      row.startTime = startTime 
      row.endTime = endTime

      this.form = row
        console.log(this.form);
      this.open = true;
    },
    /** 删除按钮操作 */
    del(row) {
      // const courseIds = row.id || row.name;
      this.$modal.confirm('是否确认删除时间为"' + row.arrangeTime + '"的数据？').then(function() {
        return delTimePool(row.id);
      }).then(() => {
        this.Listload();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 时间状态修改
    async handleStatusChange(row) {
      let text = row.status === "0" ? "启用" : "停用";
      try {
        await this.$modal.confirm('确认要"' + text + '""' + row.arrangeTime + '"时间吗？');
        await updateTimePool(row.id, row.status);
        this.$modal.msgSuccess(text + "成功"); 
        this.Listload();
      } catch (error) {
        row.status = row.status === "0" ? "1" : "0";
      }
    },
    /** 选中表格 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 重置查询条件 */
    reset() {
        this.queryForm.name = ""
        this.queryForm.coach = ""
        this.Listload()
    },
    /** 分页 */
    handleSizeChange(pageSize){
      console.log(pageSize);
      this.pageSize = pageSize;
      this.Listload();
    },
    handleCurrentChange(pageNum){
      console.log(pageNum);
      this.pageNum = pageNum;
      this.Listload();
    },
  },

}
</script>